✏️ Aufgabe bearbeiten

🚀 Multi-Seiten Anwendung

Willkommen zur Multi-Seiten App 👋

Dies ist eine moderne Single-Page-Anwendung mit HTML5, CSS3 und JavaScript. Navigiere durch die verschiedenen Seiten um alle Funktionen zu erkunden.

Highlights:

📱 Responsive Design

Funktioniert perfekt auf allen Geräten und Bildschirmgrößen.

⚡ Schnell & Effizient

Single-Page-App für nahtlose Navigation ohne Neuladen.

🎨 Modern Designed

Schöne Gradients und moderne CSS3 Features.

🔧 Viele Funktionen

Rechner, Timer, Task-Liste, Farbpicker und mehr!

Aktuelle Zeit

⭐ Funktionen dieser App

Allgemeine Features:

  • ✅ Fixierter Header mit Navigation
  • ✅ Fixierter Footer mit Informationen
  • ✅ Responsive Layout für mobile Geräte
  • ✅ Smooth Transitions und Animationen
  • ✅ Moderne CSS3 Gradients und Effekte

Interaktive Features:

  • 🧮 Voll funktionsfähiger Taschenrechner
  • 📝 Task/To-Do Liste mit Add/Delete
  • ⏱️ Countdown Timer mit Start/Stop
  • 📧 Kontaktformular mit Validierung
  • 🎨 Live Farbpicker

Erweiterte Features:

  • 📊 Progress Bars mit Animation
  • 🎯 Toast Benachrichtigungen mit Countdown
  • ✏️ Inline Task-Bearbeitung
  • 🖱️ Event Listeners und DOM Manipulation
  • 💾 Browser LocalStorage Support
  • 🔄 Dynamisches Seiten-Switching

🔔 Toast-Benachrichtigungen Demo

Klicken Sie auf die Buttons, um verschiedene Toast-Notifications zu sehen:

📊 Mit Countdown & Progress-Animation:

Toasts verschwinden automatisch nach 5 Sekunden mit einer Fortschrittsanzeige.

🌐 Webhook-Integration

Automatische Benachrichtigungen an externe URLs bei Task-Ereignissen.

📊 Zwei Webhook-Modi:

1️⃣ POST-Request (ohne ?)

Beispiel: https://webhook.site/abc123

Sendet JSON-Daten beim Event (task_completed, task_deadline_exceeded, etc.)
2️⃣ Fenster öffnen (mit ?)

Beispiel: https://example.com?taskId={taskId}&event={event}

Öffnet neues Fenster mit Query-Parametern. Unterstützt: {taskId}, {taskText}, {event}, {timestamp}

✅ Webhook-Ereignisse:

  • task_completed - Task manuell erledigt
  • task_deadline_exceeded - Deadline abgelaufen
  • task_repeated - Wiederholte Aufgabe erstellt
  • timer_finished - Timer abgelaufen

💡 Kostenlose Test-Services:

  • webhook.site - Webhook-Tester (POST-Requests anschauen)
  • ngrok.io - Localhost tunneln
  • Discord Webhooks - discord.com/api/webhooks/...

🧮 Taschenrechner

0

📝 Aufgabenliste mit Zeitverwaltung

➕ Neue Aufgabe

POST-Request oder Fenster öffnen (mit ? in der URL). Mit Ton-Benachrichtigungen.

✨

Keine Aufgaben - Super erledigt!

📊 Statistiken

0

Gesamt

0

Offen

0

Überfällig

0

Erledigt

📅 Zeitplan (Nächste 7 Tage)

⏱️ Countdown Timer (Mehrere Timer möglich)

➕ Neuen Timer erstellen

POST-Request: webhook.site/xxx | Fenster: example.com?event={event}×tamp={timestamp}

⚡ Schnell-Timer

⏳ Aktive Timer

⏱️

Keine aktiven Timer - Erstelle einen oben!

📊 Timer-Statistik

0

Aktive Timer

0

Fertig

📧 E-Mail Verwaltung

Neue E-Mail

Posteingang

📭

Dein Posteingang ist leer

E-Mail Einstellungen

📊 Statistiken

✉️ Gesamt E-Mails: 0

🆕 Ungelesen: 0

🔴 Wichtig: 0

💾 Speicher: 0 KB

⚙️ Aktionen

🎨 Test Farb-Picker

📊 Logbuch & Aufgaben-Historie

📈 Logbuch Statistik:
📋 Gesamt: 0
✅ Erledigt: 0
⏰ Deadline: 0
🔄 Wiederholt: 0
✏️ Bearbeitet: 0
🗑️ Gelöscht: 0
⏱️ Timer: 0
Keine Log-Einträge

ℹ️ Über diese Anwendung

Technologien:

HTML5

Semantisches Markup, Input Validierung, Form Elemente

CSS3

Gradients, Flexbox, Grid, Transitions, Animations

JavaScript

Event Handling, DOM Manipulation, LocalStorage

Projekt-Merkmale:

  • Single Page Application (SPA)
  • Keine externe Libraries - Vanilla JavaScript
  • Vollständig responsive Design
  • Modern CSS3 Features
  • Benutzerinteraktive Elemente
  • Progress Tracking

Statistiken:

📄 Seiten: 9 (Home, Features, Rechner, Aufgaben, Timer, Kontakt, Logbuch, Über, Einstellungen)

🎨 CSS Regeln: 200+ (Responsive Design mit Dark Mode Support)

⚙️ JavaScript Funktionen: 80+ (Task Management, Timer, Webhooks, Logging)

📱 Breakpoints: 4 (Mobil: <600px, Tablet: 600-768px, Desktop: 768-1200px, HD: >1200px)

💾 LocalStorage: Task-Speicher, Log-Verlauf, Timer, E-Mails, Einstellungen

⚙️ Einstellungen

🔔 Benachrichtigungen

Abspielen von Tönen bei Aufgabenabschluss, Deadlines und Wiederholungen

Systembenachrichtigungen für wichtige Ereignisse (benötigt Berechtigung)

🎨 Darstellung

Dunkles Design für komfortable Nutzung bei schlechten Lichtverhältnissen

💾 Daten & Speicher

📊 Speichernutzung

Berechne...

📝 Aufgaben

-

⏱️ Timer

-

📋 Log-Einträge

-

ℹ️ Alle Einstellungen werden lokal im Browser gespeichert. Keine Daten werden an externe Server übertragen.

🔒 Ihre Daten sind privat und gehören ganz Ihnen.

💾 Nutzen Sie regelmäßig den Export, um ein Backup zu erstellen.